<template>
    <div class="main_container" style="width: 100%">
        <el-header style="text-align: right; font-size: 12px">
            <div class="pageHeader_container">
                <el-page-header @back="" content="药品目录管理"></el-page-header>
            </div>
        </el-header>
        <el-main>
            <div class="center_container">
                <div class="center_header">

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="center_header_label">药品编码</div>
                            <el-input type="text" placeholder="请输入" v-model="search.searchId"
                                      maxlength="10">
                                <!--<input type="text" v-model="this.search.searchId">-->
                                <!--show-word-limit-->
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <div class="center_header_label">药品名称</div>
                            <el-input type="text" placeholder="请输入" v-model="search.searchDrugsName">
                                <!--show-word-limit-->
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <div class="center_header_label">生产厂家</div>
                            <el-input type="text" placeholder="请输入" v-model="search.searchManufacturer"
                                      maxlength="10">
                                <!--show-word-limit-->
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <div class="center_header_button">
                                <el-button round @click="searchDrugs()" class="header_button_submit">搜索</el-button>
                                <el-button round @click="resetForm()" class="header_button_reset">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="center_list_container">
                    <el-button round class="center_list_button" @click="$router.push('/home/pharmacy/newDrugs')">新增药品
                    </el-button>

                    <div class="list">

                        <div class="table_container">

                            <el-table :data="drugs.slice((currentPage-1)*pageSize , currentPage*pageSize)" border
                                      style="width: 100%" class="table">
                                <el-table-column prop="id" label="ID" width="60"></el-table-column>
                                <el-table-column prop="drugscode" label="药物编码" width="150"></el-table-column>
                                <el-table-column prop="drugsname" label="药物名称" width="150"></el-table-column>
                                <el-table-column prop="drugsformat" label="药品规格" width="150"></el-table-column>
                                <el-table-column prop="drugsunit" label="包装单位" width="150"></el-table-column>
                                <el-table-column prop="manufacturer" label="生产厂家" width="150"></el-table-column>
                                <el-table-column prop="drugsdosageID" label="药品剂型" width="150"></el-table-column>
                                <el-table-column prop="drugstypeid" label="药品类型" width="150"></el-table-column>
                                <el-table-column prop="drugsprice" label="药品单价" width="150"></el-table-column>
                                <el-table-column prop="mnemoniccode" label="拼音助记码" width="150"></el-table-column>
                                <el-table-column prop="creationdate" label="创建时间" width="150"></el-table-column>
                                <el-table-column prop="lastupdatedate" label="最后修改时间" width="150"></el-table-column>
                                <!--<el-table-column prop="delmark" label="删除标记" width="150"></el-table-column>-->
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="100">
                                    <template slot-scope="scope">
                                        <!--<el-button @click="dialogVisible = true" type="text" size="small">删除</el-button>-->
                                        <el-button type="text" size="small" @click="drugEdit(scope.row)">编辑
                                        </el-button>
                                        <el-button type="text" @click="drugDelete(scope.row)" size="small">删除
                                        </el-button>
                                        <el-dialog title="提示" :visible.sync="dialogVisible"
                                                   width="30%"
                                                   :modal-append-to-body=false>
                                            <span>确认删除“{{ editDrugName }}”的药品信息吗？</span>
                                            <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="deleteConfirm()">确 定</el-button>
                                        </span>
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>


                    <div class="pagination_container">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="this.currentPage"
                                :page-sizes="[3,5,10,20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="drugs.length">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>
    </div>
</template>

<script>
import axios from "axios";


export default {
    name: "manage",
    data() {
        return {
            search: {
                searchId: '',
                searchDrugsName: '',
                searchManufacturer: ''
            },
            drugs: [
                {
                    ID: "",
                    DrugsCode: "",
                    DrugsName: "",
                    DrugsFormat: "",
                    DrugsUnit: "",
                    Manufacturer: "",
                    DrugsDosageID: "",
                    DrugsTypeID: "",
                    DrugsPrice: "",
                    MnemonicCode: "",
                    CreationDate: "",
                    LastUpdateDate: "",
                    DelMark: ""
                }, {
                    ID: "",
                    DrugsCode: "",
                    DrugsName: "",
                    DrugsFormat: "",
                    DrugsUnit: "",
                    Manufacturer: "",
                    DrugsDosageID: "",
                    DrugsTypeID: "",
                    DrugsPrice: "",
                    MnemonicCode: "",
                    CreationDate: "",
                    LastUpdateDate: "",
                    DelMark: ""
                }, {
                    ID: "",
                    DrugsCode: "",
                    DrugsName: "",
                    DrugsFormat: "",
                    DrugsUnit: "",
                    Manufacturer: "",
                    DrugsDosageID: "",
                    DrugsTypeID: "",
                    DrugsPrice: "",
                    MnemonicCode: "",
                    CreationDate: "",
                    LastUpdateDate: "",
                    DelMark: ""
                }
            ],
            currentPage: 1,          // 当前页码
            total: "",                // 总条数
            pageSize: "3",          // 每页的数据条数
            dialogVisible: false,
            dialogData: {
                ID: "",
                DrugsCode: "",
                DrugsName: "",
                DrugsFormat: "",
                DrugsUnit: "",
                Manufacturer: "",
                DrugsDosageID: "",
                DrugsTypeID: "",
                DrugsPrice: "",
                MnemonicCode: "",
                CreationDate: "",
                LastUpdateDate: "",
                DelMark: ""
            },
            editId: '',
            editDrugName: '',
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        searchDrugs() {
            let searchId = this.search.searchId;
            let searchDrugsName = this.search.searchDrugsName
            let searchManufacturer = this.search.searchManufacturer;

            /*console.log(searchDrugsName);
            console.log(searchDrugsName == "")*/

            if (searchId == "") {
                searchId = searchId + "%20";
            }
            if (searchManufacturer == "") {
                searchManufacturer = searchManufacturer + "%20";
            }
            if (searchDrugsName == "") {
                searchDrugsName = searchDrugsName + "%20";
            }

            /*this.toolOne(this.search.searchId);
            this.toolOne(this.search.searchManufacturer);
            this.toolOne(this.search.searchDrugsName);*/

            /*console.log(searchId)
            console.log(searchDrugsName)
            console.log(searchManufacturer)*/
            // console.log(searchManufacturer.toString());

            axios.get('http://localhost:8888/drugs/query/' + searchId + '/' + searchDrugsName + '/' + searchManufacturer).then((response => {
                this.drugs = response.data;
                // console.log(this.drugs.length);
                this.currentPage = 1;

            })).catch((error) => {
                this.$message.error("查询错误，请联系管理员");
            })
        },
        drugDelete(e) {
            this.editId = e.id;
            this.editDrugName = e.drugsname;
            this.dialogVisible = true;

        },
        drugEdit(e) {
            /*console.log(JSON.stringify(e))
            console.log(JSON.stringify(e.id))*/
            // this.$store.commit("setDrugsEditId", {drugsEditId: e.id});
            // // alert(this.$store.state.drugstore.drugsEditId.drugsEditId);
            // console.log("state里面的东西是:" + this.$store.state.drugstore.drugsEditId.drugsEditId);
            // axios('http://localhost:8888/drugs/edit/update/' + this.$store.state.drugstore.drugsEditId.drugsEditId).then((response) => {
            //     console.log(response);
            //
            // })
            axios('http://localhost:8888/drugs/edit/update/' + e.id).then((response) => {
                console.log(response);
                this.$router.push('/home/pharmacy/details');
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
        },
        deleteConfirm() {
            axios.delete('http://localhost:8888/drugs/delete/' + this.editId).then((response) => {
                if (response.status == "200") {
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    });
                } else {
                    this.$message.error("修改失败")
                }
            })
            this.dialogVisible = false;
        },
        resetForm() {
            this.search.searchId = '';
            this.search.searchDrugsName = '';
            this.search.searchManufacturer = '';
        }

    },

}
</script>

<style scoped>
.center_container {
    /*margin: 20px 30px 30px 30px;*/
    /*border: black 1px solid;*/
}

.el-main {
    padding: 30px 50px;
}

.center_header {
    height: 127px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;
    /*box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.12);*/
    /*box-shadow: 3px 0 22px 0 rgba(0,0,0,0.10);*/
    padding: 30px;
    margin-bottom: 20px;
}

.el-input__inner {
    height: 40px;
    line-height: 40px;
    border: 1px solid #f8f5f5;
    border-radius: 6px;
}

.header_button_submit {
    background-color: #258CE8 !important;
    color: #FFFFFF !important;
    transition: 0.4s;
}

.header_button_reset {
    transition: 0.4s;
}

.header_button_reset:hover {
    box-shadow: 0 4px 5px rgba(0, 0, 0, .11);
    background-color: #FFFFFF;
    color: black;
    border-color: rgb(220, 223, 230);
}

.header_button_submit:hover {
    color: #FFFFFF;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .19);
}

.center_list_button {
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #FABB52;
    color: #FFFFFF;
    transition: 0.2s;
}

.center_header_label {
    margin-bottom: 10px;
    height: 18px;
    font-size: 13px;
    color: #887e7e;
    /*font-family: PingFangSC,PingFangSC-Medium,serif;*/
    font-weight: 500;
}

.center_list_container {
    margin-top: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;
    /*box-shadow: 0 0 22px 0 rgba(0,0,0,0.10);*/

}

.center_header_button {
    position: relative;
    top: 27px;
    float: right;
}

.pagination_container {
    margin: 0 auto;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 34px;
}

.el-table__body {
    width: 100% !important;
    margin: 0 !important;
}


.center_list_button:hover,
.center_list_button:active,
.center_list_button:focus {
    background-color: #FABB52;
    color: #FFFFFF;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 7px;

}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

</style>
